<!DOCTYPE html>
<html>
    <!-- JavaScript层次节点练习 -->
    <head>
        <meta charset="utf-8"/>
      
    </head>
    <style>
        .div{
            font-size:50px;
        }
        .div{
            font-size: 16px;
        }
    </style>
    <body>
        
<ul id="ul" class ="ul">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
<div style="width:100%;height:30px;background-color: blue;" id="div1">

</div>
<br/>
<button onclick="copyUl()">复制一个<ul></ul></button>

<script type="text/javaScript">
    var count = 1;
    function copyUl(){
        var ul = document.getElementById("ul");
        var div1 = document.getElementById("div1");
        count++;
        var ulClone = ul.cloneNode(true);   //复制ul的所有子节点
        ulClone.setAttribute("id","ul=count");//为新复制的节点设置id
        document.body.insertBefore(ulClone,div1)
    }
  
</script>
</body>

</html>